<template>
  <div class="about">
    <!-- 头部 -->
    <van-nav-bar title="购物车页面" />
    <!-- 滑动单元格 -->
    <van-swipe-cell v-for="(item,index) in shopCar" :key="index">
      <!-- layout布局 -->
      <van-row>
        <van-col span="2">
          <!-- 复选框 -->
          <input type="checkbox" v-model="item.status" @change="checks"/>
        </van-col>
        <van-col span="22">
          <!-- 卡片 -->
          <van-card
            :price="item.price"
            :thumb="item.pic"
          >
          <!-- 插槽插入内容 -->
          <template #title>
            {{item.title}}
          </template>
          <template #num>
            <!-- 步进器 -->
            <van-stepper v-model="item.num" @plus="plus(index)" @minus="minus(index)"/>

            
          </template>

          </van-card>
        </van-col>
      </van-row>

      <template #right>
        <van-button square type="danger" text="删除" @click="del(index)"/>
      </template>
    </van-swipe-cell>
    <!-- 提交订单栏 -->
    <van-submit-bar :price="total*100" :button-text="`提交订单(${sum})`">
        <!-- <input type="checkbox" @change="checkAll" v-model="selectAll">全选 -->
     <!-- <van-checkbox v-model="checked">全选</van-checkbox> -->
      <van-button  type="danger" size="mini" text="删除所选" @click="removeSelect"/>
</van-submit-bar>

  </div>
</template>
<script>
import { computed,reactive,toRefs } from "vue";
import { useStore } from "vuex";
export default {
  setup(props) {
    const { state,commit,getters } = useStore();
    const data = reactive({
        selectAll:false,//全选按钮的初始状态
    })
   
//    全选事件
   const checkAll = ()=>{
      commit('checkAll',data.selectAll)
   }
//    点击上面的复选框事件
    const checks = ()=>{
       data.selectAll =  state.cartList.every(item=>item.status)
        
    }
    // 删除
    const del = (index)=>{
        commit('del',index)
        // 三元表达式
        data.selectAll = state.cartList.length?state.cartList.every(item=>item.status):false

    }
    // 获取总价
    const total = computed(()=>getters.getTotal)
    // 获取总数
    const sum = computed(()=>getters.getSum)
    const shopCar = computed(() => state.cartList);
    // 点击-号
    const minus = (index)=>{
        commit('minus',index)

    }
    // 点击+号
    const plus = (index)=>{
            commit('plus',index)
    }
    // 删除所选
    const removeSelect = ()=>{
        commit('removeSelect')
    }
    return { shopCar,...toRefs(data),checkAll,checks,del,total,sum,minus,plus,removeSelect};
  },
};
</script>
<style lang="scss" scoped>
.van-button--danger {
  height: 100%;
}
.van-row {
  align-items: center;
}
.van-card {
  background: #fff;
}
</style>
